<template>
  <li>
    <router-link class="clearfix" :to="{path: item.link}" :id="item.id" :pid="item.pid" @click.native="selectmenu(item,$event)">
      <i class="bx bx-xs icon" :class="item.icon"></i>
      <span class="title">{{ item.name }}</span>
      <i class="bx bx-xs bx-icon bx-plus" v-if="isFolder===true"></i>
    </router-link>
    <ul class="sm not-open" v-if="isFolder">
        <mtree v-for="(mdata,key) in item.children" :key="key" :item="mdata"></mtree>
    </ul>
  </li>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'mtree',
  props: {
    item: Object
  },
  data () {
    return {
      // isShowChildren:false
    }
  },
  computed: {
    // 判断是否有子菜单
    isFolder () {
      return this.item.children && this.item.children.length > 0
    }
  },
  methods: {
    selectmenu (item, e) {
      var target = e.currentTarget
      // 判断是否有子菜单
      if (this.isFolder) {
        // 判断是不是一级菜单，一级菜单的pid=0
        if (item.pid !== 0) {
          // 判断当前子菜单是否是打开的
          if (!$(target).next().hasClass('open')) {
            $('.sm').removeClass('open').addClass('not-open')
            $('a[id=' + item.pid + ']').next().removeClass('not-open').addClass('open')
            $(target).next().removeClass('not-open').addClass('open')
            $(target).find('.bx-icon').removeClass('bx-plus').addClass('bx-minus')
          } else {
            $(target).next().removeClass('open').addClass('not-open')
            $(target).find('.bx-icon').removeClass('bx-minus').addClass('bx-plus')
          }
        } else {
          // 判断当前子菜单是否是打开的
          if (!$(target).next().hasClass('open')) {
            $('.sm').removeClass('open').addClass('not-open')
            $(target).next().removeClass('not-open').addClass('open')
            $('.bx-icon').removeClass('bx-minus').addClass('bx-plus')
            $(target).find('.bx-icon').removeClass('bx-plus').addClass('bx-minus')
          } else {
            $(target).next().removeClass('open').addClass('not-open')
            $(target).find('.bx-icon').removeClass('bx-minus').addClass('bx-plus')
          }
        }
      }
      // 当点击的菜单没有子菜单，并且是一级菜单时
      if (!this.isFolder && item.pid === 0) {
        $('.sm').removeClass('open').addClass('not-open')
        $('.bx-icon').removeClass('bx-minus').addClass('bx-plus')
      }
    }
  }
}
</script>

<style scope>
.left a {
  color: #dbdbdb;
  display: block;
  width: 100%;
  padding: 3px 10px;
  box-sizing: border-box;
  font-size: 16px;
  margin-bottom: 2px;
}
.left .icon {
  font-size: 18px!important;
  margin-right: 5px;
  margin-top: 6px;
  float:left;
}
.left .bx-icon {
  float: right;
  font-weight: bold;
  margin-top: 8px;
}
.left .title {
  float:left;
}
.left .open {
  display: block;
  animation: show .3s;
}
.left .not-open {
  display: none;
  opacity: 0;
}
.left .sm {
  background-color: #616161;
  padding-left: 10px;
}
.left .sm a {
  font-size: 14px;
}
.left .sm li{
  margin-bottom: 0;
}
@keyframes show {
  0% {
    opacity: 0;
    transform: translateY(0)
  }
  100% {
    opacity: 1;
    transform: translateY(100)
  }
}
/* .left .router-link-active {
  color:darkorange;
} */
.left .router-link-exact-active {
  color:darkorange;
}
</style>
